<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 150px;
            height: 150px;
            background-color: darkred;
            position: absolute;
            left: 0px;
        }
    </style>
</head>
<body>
    <button>运 动</button>
    <div class="div1"></div>
    <script>
//        运行函数的步骤
//        1、清除定时器
//        2、开启定时器
//        3、处理速度的方向
//        4、处理到达目标点

        var oDiv = document.querySelector(".div1");
        var oBtn = document.querySelector("button"), iTimer = null;
        oBtn.addEventListener("click", function(){
          linearMove(oDiv, 309);
        }, false);

        function linearMove(element, iTarget){          //匀速运动函数
            clearInterval(iTimer);              //保证只有一个定时器在运行
            var iSpeed;
            iTimer = setInterval(function(){
                (iTarget > element.offsetLeft) ? iSpeed = 5 : iSpeed = -5;      // 根据目标点和变化的样式值决定运动方向
                if(Math.abs(iTarget - element.offsetLeft) <= Math.abs(iSpeed)){         //定时器终止条件
                    element.style.left = iTarget + "px";
                    clearInterval(iTimer);
                }else{
                    element.style.left = element.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }

    </script>
</body>
</html>